
<template>
  <div class="search-block-panel">
    <el-form label-width="80px" size="small">
      <el-form-item label="高度">
        <el-slider 
          v-model="localData.height" 
          :min="30" 
          :max="60" 
          show-input 
          input-size="small"
        />
      </el-form-item>

      <el-form-item label="背景色">
        <el-color-picker v-model="localData.backgroundColor" />
      </el-form-item>

      <el-form-item label="圆角">
        <el-slider 
          v-model="localData.borderRadius" 
          :min="0" 
          :max="20" 
          show-input 
          input-size="small"
        />
      </el-form-item>

      <el-divider>内容设置</el-divider>

      <el-form-item label="占位文本">
        <el-input v-model="localData.placeholder" />
      </el-form-item>

      <el-form-item label="文本位置">
        <el-radio-group v-model="localData.placeholderPosition">
          <el-radio label="left">左对齐</el-radio>
          <el-radio label="center">居中</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="显示方式">
        <el-radio-group v-model="localData.navbar">
          <el-radio :label="true">导航栏样式</el-radio>
          <el-radio :label="false">输入框样式</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-divider>颜色设置</el-divider>

      <el-form-item label="文字颜色">
        <el-color-picker v-model="localData.fontColor" />
      </el-form-item>

      <el-form-item label="图标颜色">
        <el-color-picker v-model="localData.iconColor" />
      </el-form-item>

      <el-divider>功能设置</el-divider>

      <el-form-item label="显示扫码">
        <el-switch v-model="localData.showScan" />
      </el-form-item>

      <el-divider>热门关键词</el-divider>

      <el-form-item label="启用关键词">
        <el-switch v-model="localData.enableHotKeywords" />
      </el-form-item>

      <template v-if="localData.enableHotKeywords">
        <el-form-item label="关键词颜色">
          <el-color-picker v-model="localData.hotKeywordColor" />
        </el-form-item>

        <el-form-item label="标签样式">
          <el-select v-model="localData.hotKeywordStyle" placeholder="选择标签样式">
            <el-option label="无底纹" value="none" />
            <el-option label="浅灰色底纹" value="light-gray" />
            <el-option label="浅蓝色底纹" value="light-blue" />
            <el-option label="浅绿色底纹" value="light-green" />
            <el-option label="浅红色底纹" value="light-red" />
            <el-option label="浅黄色底纹" value="light-yellow" />
            <el-option label="自定义颜色" value="custom" />
          </el-select>
        </el-form-item>

        <el-form-item v-if="localData.hotKeywordStyle === 'custom'" label="底纹颜色">
          <el-color-picker v-model="localData.hotKeywordBgColor" />
        </el-form-item>

        <el-form-item>
        <div class="hot-keywords">
          <div 
            v-for="(item, index) in localData.hotKeywords" 
            :key="index"
            class="keyword-item"
          >
            <el-input 
              v-model="localData.hotKeywords[index]" 
              placeholder="请输入关键词"
              size="small"
            />
            <el-button 
              type="danger" 
              icon="Delete" 
              circle 
              size="small"
              @click="removeKeyword(index)"
            />
          </div>

          <el-button 
            type="primary" 
            icon="Plus" 
            @click="addKeyword"
            style="width: 100%; margin-top: 10px;"
          >
            添加关键词
          </el-button>
        </div>
      </el-form-item>
      </template>

      <el-divider>边距设置</el-divider>

      <el-form-item label="上边距">
        <el-slider 
          v-model="localStyles.marginTop" 
          :min="0" 
          :max="50" 
          show-input 
          input-size="small"
        />
      </el-form-item>

      <el-form-item label="下边距">
        <el-slider 
          v-model="localStyles.marginBottom" 
          :min="0" 
          :max="50" 
          show-input 
          input-size="small"
        />
      </el-form-item>

      <el-form-item label="左边距">
        <el-slider 
          v-model="localStyles.marginLeft" 
          :min="0" 
          :max="50" 
          show-input 
          input-size="small"
        />
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import { Delete, Plus } from '@element-plus/icons-vue'

// 定义组件属性
const props = defineProps({
  data: {
    type: Object,
    default: () => ({})
  },
  styles: {
    type: Object,
    default: () => ({})
  }
})

// 定义事件
const emit = defineEmits(['update-data', 'update-styles'])

// 本地数据
const localData = ref({
  height: 40,
  backgroundColor: '#f5f5f5',
  borderRadius: 20,
  placeholder: '请输入搜索关键词',
  placeholderPosition: 'left',
  navbar: true,
  fontColor: '#999999',
  iconColor: '#999999',
  showScan: false,
  hotKeywords: [],
  enableHotKeywords: true,
  hotKeywordColor: '#666666',
  hotKeywordStyle: 'none',
  hotKeywordBgColor: '#f0f0f0',
  ...props.data
})

const localStyles = ref({
  marginTop: 0,
  marginBottom: 0,
  marginLeft: 0,
  marginRight: 0,
  ...props.styles
})

// 监听props变化，确保面板能同步显示组件的当前状态
watch(() => props.data, (newVal) => {
  // 使用Object.assign确保触发响应式更新
  Object.keys(newVal).forEach(key => {
    if (newVal[key] !== undefined) {
      localData.value[key] = newVal[key]
    }
  })
}, { deep: true, immediate: true })

watch(() => props.styles, (newVal) => {
  // 使用Object.assign确保触发响应式更新
  Object.keys(newVal).forEach(key => {
    if (newVal[key] !== undefined) {
      localStyles.value[key] = newVal[key]
    }
  })
}, { deep: true, immediate: true })

// 监听数据变化
watch(localData, (newVal) => {
  emit('update-data', newVal)
}, { deep: true })

watch(localStyles, (newVal) => {
  emit('update-styles', newVal)
}, { deep: true })

// 方法
function addKeyword() {
  if (!localData.value.hotKeywords) {
    localData.value.hotKeywords = []
  }
  localData.value.hotKeywords.push('')
}

function removeKeyword(index) {
  localData.value.hotKeywords.splice(index, 1)
}
</script>

<style lang="scss" scoped>
.search-block-panel {
  padding: 10px;

  .hot-keywords {
    width: 100%;

    .keyword-item {
      display: flex;
      align-items: center;
      margin-bottom: 10px;

      .el-input {
        flex: 1;
        margin-right: 10px;
      }
    }
  }
}
</style>
